<template>
  <div class="channel-main">
    <div class="channel-title">
      <div class="title">行政许可</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="" />
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="item-list">
      <div class="item" style="padding-bottom: 16px">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">批复总体概览</div>
          <div class="value">{{ dataInfo.licenceCount || "-" }}</div>
        </div>
        <div class="line"></div>
        <div class="item-count">
          <div class="item-count-item">
            <h3>批复前</h3>
            <p>{{ dataInfo.beforeReplyCount || "-" }}</p>
          </div>
          <van-icon size="20px" color="#2d78ed" name="play" />
          <div class="item-count-item">
            <h3>批复中</h3>
            <p>{{ dataInfo.underReplyCount || "-" }}</p>
          </div>
          <van-icon size="20px" color="#2d78ed" name="play" />
          <div class="item-count-item">
            <h3>已办结</h3>
            <p>{{ dataInfo.replyCount || "-" }}</p>
          </div>
        </div>
        <div class="chart" id="bar-chart"></div>
        <div class="item-count2">
          <div class="item-count-item">
            <h3>已批复许可情况</h3>
            <p>{{ dataInfo.replyCount || "-" }}</p>
          </div>
          <div class="item-count-item">
            <h3>已批复许可有效期情况</h3>
            <p>{{ dataInfo.replyCount || "-" }}</p>
          </div>
        </div>
      </div>

      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">区域中心许可情况汇总</div>
        </div>

        <div class="line"></div>
        <div class="chart" id="bar2-chart"></div>
      </div>
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { getLicenceInfo } from "../../utils/apis";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import OlArc from "./olArc.vue";
import { format } from "echarts/core";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  CanvasRenderer,
  DataZoomComponent,
]);

const initBarChart = () => {
  let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
  if (barChart != null && barChart != "" && barChart != undefined) {
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById("bar-chart"));
  let option;
  option = {
    tooltip: {
      // trigger: "axis",
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemWidth: 6, // 设置图例项的宽度
      itemHeight: 6, // 设置图例项的高度
      textStyle: {
        fontSize: "12px",
        color: "rgba(0,0,0,0.85)",
      },
      itemGap: 4,
      icon: "circle", //图例设置成圆形
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "8%",
      bottom: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 12,
        startValue: 0,
        endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        data: ["航评审批", "施工审批", "设标审批", "通航建筑物审批"],
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel: {
          interval: 0,
          // formatter: function (value) {
          //   //x轴的文字改为竖版显示
          //   var str = value.split("");
          //   return str.join("\n");
          // },
        },
        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位（个）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        // nameLocation: "center",
        nameGap: 15,
      },
    ],
    series: [
      {
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barWidth: 10,
        color: "#67CDF7",
        data: [
          dataInfo.value.navigationEvaluateCount || 0,
          dataInfo.value.constructionCount || 0,
          dataInfo.value.setNavigationMarkCount || 0,
          dataInfo.value.navigationBuildingCount || 0,
        ],
      },
    ],
  };

  option && barChart.setOption(option);
};
const initBar2Chart = () => {
  let barChart = echarts.getInstanceByDom(
    document.getElementById("bar2-chart")
  );
  if (barChart != null && barChart != "" && barChart != undefined) {
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById("bar2-chart"));
  let option;
  option = {
    tooltip: {
      // trigger: "axis",
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      // itemWidth: 6, // 设置图例项的宽度
      // itemHeight: 6, // 设置图例项的高度
      textStyle: {
        fontSize: "12px",
        color: "rgba(0,0,0,0.85)",
      },
      itemGap: 10,
      top: "3%",
    },
    grid: {
      top: "20%",
      left: "5%",
      right: "8%",
      bottom: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 12,
        startValue: 0,
        endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        data: licenceDetail.value.map((item) => item.orgName.substring(0, 2)),
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            var str = value.split("");
            return str.join("\n");
          }
        },
        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位（个）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        // nameLocation: "center",
        nameGap: 15,
      },
    ],
    series: [
      {
        name: "批复前",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        
        barWidth: 10,
        color: "#67CDF7",
        data: licenceDetail.value.map((item) => item.count.count1),
      },
      {
        name: "批复中",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",

        barWidth: 10,
        color: "#FFCB32",
        data: licenceDetail.value.map((item) => item.count.count2),
      },
      {
        name: "已办结",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",

        barWidth: 10,
        color: "#F08BB4",
        data: licenceDetail.value.map((item) => item.count.count3),
      },
    ],
  };

  option && barChart.setOption(option);
};

// 获取数据
const dataInfo = ref({});
const licenceDetail = ref({});
const getLicenceInfoFn = () => {
  getLicenceInfo().then((res) => {
    if (res.code === 200 && res.data) {
      let resData = res.data;
      dataInfo.value = resData[0].licenceInfo;
      licenceDetail.value = resData[1].licenceDetail;
      nextTick(()=>{
        initBarChart();
        initBar2Chart();
      })
    }
  });
};

//获取日期
const currentYearMonth1 = ref("");
const currentYearMonth2 = ref("");

onMounted(() => {
  if (sessionStorage.getItem("watermarkTxt")) {
    //加水印
    watermark.init({
      watermark_x: -30, // 水印起始位置x轴坐标
      watermark_y: -20, // 水印起始位置Y轴坐标
      watermark_x_space: 20, // 水印x轴间隔
      watermark_y_space: 80, // 水印y轴间隔
      watermark_alpha: 0.07, // 水印透明度
      watermark_fontsize: "14px", // 水印字体大小
      watermark_width: 100, // 水印宽度
      watermark_height: 30,
      watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
      watermark_angle: 25, // 水印倾斜度数
      watermark_rows: 0, // 水印行数
      watermark_cols: 0, // 水印列数
      watermark_font: "微软雅黑", // 水印字体
      watermark_color: "black", // 水印字体颜色
    });
  }

  currentYearMonth1.value = new Date().getFullYear() + ".01";
  currentYearMonth2.value = new Date().format("yyyy.MM");

  getLicenceInfoFn();
});
</script>

<style lang="scss" scoped>
.channel-main {
  overflow-x: hidden;
  background: #ececee;
  padding: 0 0 1px 0;
  .channel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 10px 20px;
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #262626;
    }
    .time {
      display: flex;
      align-items: center;
      color: #8c8c8c;
      font-size: 14px;
      font-weight: 500;
      img {
        width: 18px;
        height: 18px;
        padding-right: 5px;
      }
    }
  }
  .unit {
    display: flex;
    flex-direction: row-reverse;
    padding: 8px 12px 8px 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
  }
  .item-list {
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    .value {
      margin-right: 16px;
      font-size: 20px;
      font-weight: bold;
      color: #2d78ed;
    }
    .item-count {
      box-sizing: border-box;
      padding: 16px 16px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-count-item {
        box-sizing: border-box;
        text-align: center;
        background: rgb(238, 252, 254);
        border-radius: 8px;
        padding: 10px 0;
        min-width: 28%;
        h3 {
          font-weight: bold;
          margin: 0;
        }
        p {
          margin: 0;
          margin-top: 10px;
          color: #2d78ed;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .item-count2 {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;

      .item-count-item {
        width: 48%;
        text-align: center;
        box-sizing: border-box;
        text-align: center;
        background: rgb(238, 252, 254);
        border-radius: 8px;
        padding: 10px 0;
        h3 {
          font-weight: bold;
          margin: 0;
        }
        p {
          margin: 0;
          margin-top: 10px;
          color: #4ed9a0;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .item {
      background: #ffffff;
      box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      opacity: 1;
      margin-bottom: 16px;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px 0 16px 16px;
        position: relative;
      }
      .line {
        height: 1px;
        background: #d9d9d9;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-left: 16px;
        margin-right: 16px;
      }
      .item-content-frist,
      .item-content-second {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        margin: 16px 19px 0px 16px;
        .icon {
          width: 42px;
          height: 42px;
          margin-right: 8px;
          margin-left: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .item-name {
          font-size: 12px;
          font-weight: 400;
          color: #595959;
        }
        .item-num {
          font-size: 18px;
          font-weight: 800;
          color: rgba(1, 191, 142, 0.8);
        }
        .little {
          padding: 6px;
        }
      }
      .item-content-frist {
        background-image: url("../../static/images/waterway-first-icon-bottom.png");
        // width: 300px;
        height: 80px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .item-content-second {
        background-image: url("../../static/images/waterway-second-icon-bottom.png");
        // width: 300px;
        height: 80px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .amount-content {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 16px;
        .amount-item {
          margin-top: 16px;
          .name {
            font-size: 14px;
            font-weight: 500;
            color: #8c8c8c;
          }
          .num {
            font-size: 21px;
            font-weight: 500;
            color: #595959;
            margin-top: 8px;
            text-align: center;
          }
        }
        .line-box {
          border-left: 1px solid #d9d9d9;
          width: 1px;
          height: 45px;
          margin: 16px 16px 0px 16px;
        }
      }
      .item-content-n {
        font-size: 14px;
        font-weight: bold;
        padding: 16px;
        .top,
        .bottom {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .little {
            width: 35%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .name {
              font-size: 12px;
              font-weight: 400;
              color: #595959;
              margin-bottom: 4px;
            }
            .num {
              font-size: 18px;
              font-weight: 500;
              color: #262626;
            }
          }
        }
        .top {
          margin-bottom: 16px;
        }
      }
      .chart-title {
        margin-top: 16px;
        margin-left: 24px;
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        position: relative;
        margin-bottom: 12px;
      }
      .chart-title::before {
        content: "";
        background-color: #2d78ed;
        position: absolute;
        top: 50%;
        left: -8px;
        height: 12px;
        width: 2px;
        transform: translateY(-50%);
      }
      .chart {
        height: 260px;
      }
      .table-box {
        // width: 320px;
        height: 200px;
        overflow: scroll;
        scrollbar-width: none;
        scrollbar-color: transparent;
        -ms-overflow-style: none;
        .table {
          border: 1px solid #d9d9d9;
          #lineTd {
            position: relative;
          }
          #lineTd::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 50%;
            border-top: 1px solid #595959;
            // width: 100px;
            width: 110%;
            transform: translateX(-50%) rotate(-150deg);
          }
          th,
          td {
            padding: 2px;
            border: 1px solid #d9d9d9;
            color: #595959;
          }
          .tbody {
            height: 100px; /* 设置表格体容器的高度 */
            overflow-y: auto; /* 启用垂直滚动条 */
            // width: 315px;
            width: 100%;
            overflow-x: auto;
          }
        }
      }
      .table-box::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      .table-box::-webkit-scrollbar-thumb {
        background-color: transparent;
      }
      .map {
        height: 350px;
        padding-bottom: 16px;
      }
      .myTable {
        overflow: auto;
        // width:400px;
        height: 200px; /* 固定高度 */
        border: 1px solid #d9d9d9;
        border-bottom: 0;
        border-right: 0;
        margin: 10px;
        table {
          border-collapse: separate;
          table-layout: fixed;
          width: 100%; /* 固定寬度 */
          color: #595959;
        }
        td,
        th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          box-sizing: border-box;
          /* 单元格宽高 */
          width: 65px;
          height: 20px;
          text-align: center;
        }
        th {
          background-color: #f8f9fb;
        }
        /* 控制左边固定的核心代码 */
        td:nth-child(1),
        th:nth-child(1) {
          position: sticky;
          left: 0; /* 首行在左 */
          z-index: 1;
          background-color: #f8f9fb;
        }
        td:nth-child(2),
        th:nth-child(2) {
          position: sticky;
          left: 65px;
          z-index: 1;
          background-color: #f8f9fb;
        }
        /* 控制表头固定的核心代码 */
        thead tr th {
          position: sticky;
          top: 0; /* 第一列最上 */
        }
        th:nth-child(1),
        th:nth-child(2) {
          z-index: 2;
          background-color: #f8f9fb;
        }
        .diagonal {
          position: relative;
        }
        .diagonal::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 50%;
          border-top: 1px solid #d9d9d9;
          width: 110%;
          transform: translateX(-50%) rotate(-150deg);
        }
      }
      .staticTable {
        overflow: auto;
        height: 200px;
        border: 1px solid #d9d9d9;
        border-bottom: 0;
        border-right: 0;
        margin: 10px;
        table {
          border-collapse: separate;
          table-layout: fixed;
          width: 100%;
          color: #595959;
        }
        td,
        th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          box-sizing: border-box;
          width: 100px;
          height: 20px;
          text-align: center;
        }
        th {
          background-color: #f8f9fb;
        }
        /* 控制表头固定的核心代码 */
        thead tr th {
          position: sticky;
          top: 0; /* 第一列最上 */
        }
        th:nth-child(1),
        th:nth-child(2) {
          z-index: 2;
          background-color: #f8f9fb;
        }
      }
    }
  }
  .source {
    text-align: center;
    padding: 5px 0;
    color: #8c8c8c;
    .name {
      margin-bottom: 5px;
    }
  }
  .dialog-title {
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
  .dialog-content {
    padding: 0 20px 20px 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  :deep(.van-dialog__content) {
    min-height: 118px;
    max-height: 293px;
    overflow-y: scroll;
  }
}
</style>
